<template>
  <div id="scroll-board">
    <i class="bottomL"></i>
    <i class="bottomR"></i>
    <div class="title_style">
      <div style="width: 3px;height: 20px;background-color: #E68D22;margin-right: 10px;margin-top: 10px">
      </div>
      <div>
        热点舆情
      </div>
    </div>
    <dv-scroll-board :config="config" class="box_style" v-on:click="clickHandler"/>
  </div>
</template>

<script>

  import {formatDate} from "../../../utils";
  import { hotPublicOpinion,} from "@/api/system/opinion";
export default {
  name: 'TopMiddleTable',
  data () {
    return {
      // 查询参数
      config: {},
      // 查询参数
      queryParams: {
        count: 20
      },
      // 舆情表格数据
      opinionList: [],
    }
  },
  computed: {

  },
  watch:{

  },
  created() {
    this.hotPublicOpinion();
  },methods: {
    clickHandler(t){

    },
    /** 查询文章管理列表 */
    hotPublicOpinion() {
      hotPublicOpinion(this.queryParams).then(response => {
        this.opinionList = response.data;
        let obj= {
          // header: ['标题', '时间'],
          data: [],
          index: true,
          columnWidth: [30, 360,160],
          align: ['center'],
          rowNum: 10,
          headerBGC: '#1981f6',
          headerHeight: 45,
          oddRowBGC: 'rgba(0, 44, 81, 0.8)',
          evenRowBGC: 'rgba(10, 29, 50, 0.8)'
        }

        for (let i = 0; i < this.opinionList.length; i++) {
          let blogInfo = this.opinionList[i];
          let array=[]
          array.push(blogInfo.title)
          let d=formatDate(blogInfo.publishTime)
          array.push(d)
          obj.data.push(array)
        };
        this.config=obj
      });
    },
  }
}
</script>

<style lang="less" scoped>
#scroll-board {
  width: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  height: 100%;
  position: relative;
}


.title_style {
  display: flex;
  color: #00CCFF;
  font-weight: bold;
  padding-left: 10px;
  line-height: 40px;
  width: 100%;
  height: 40px;
  background-size: 100% 100%;
  background-image: url("./../../../assets/images/datav/title_bg.png");
}

.bottomL{width:20px;
  height:20px;
  border-bottom-width:2px;
  border-bottom-color:#26c6f0;
  border-bottom-style:solid;
  border-left-width:2px;
  border-left-color:#26c6f0;
  border-left-style:solid;
  position: absolute;
  bottom:-2px;
  left:-2px}
.bottomR{
  width:20px;
  height:20px;
  border-bottom-width:2px;
  border-bottom-color:#26c6f0;
  border-bottom-style:solid;
  border-right-width:2px;
  border-right-color:#26c6f0;
  border-right-style:solid;
  position:absolute;
  bottom:-2px;
  right:-2px}
.box_style{
  cursor: pointer;
  width: 100%;
  height:  calc(~"100% - 40px");;
}
</style>
